<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>npm的常用操作及vue的结构构造 &middot; 郝朝帅的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0f ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/blog/"><h1>郝朝帅的博客</h1></a>
      <p class="lead">
       我的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>npm的常用操作及vue的结构构造</h1>
  <time datetime=2020-04-21T20:04:41&#43;0800 class="post-date">Tue, Apr 21, 2020</time>
  <h3 id="vue基本语法">vue基本语法</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 查看node版本</span>
node <span style="color:#f92672">-</span>v

<span style="color:#75715e"># 查看npm版本</span>
npm <span style="color:#f92672">-</span>v
<span style="color:#75715e"># 升级npm命令</span>
npm install <span style="color:#f92672">-</span>g npm

<span style="color:#75715e"># npm换源</span>
npm set registry https:<span style="color:#f92672">//</span>registry<span style="color:#f92672">.</span>npm<span style="color:#f92672">.</span>taobao<span style="color:#f92672">.</span>org
    
<span style="color:#75715e"># 查看npm配置</span>
npm config list

<span style="color:#75715e"># 查看项目安装了哪些包</span>
npm list

<span style="color:#75715e"># 安装包</span>
npm install <span style="color:#960050;background-color:#1e0010">包名</span>

<span style="color:#e6db74">&#39;&#39;&#39;
</span><span style="color:#e6db74">删除node_modules
</span><span style="color:#e6db74">npm install rimraf -g
</span><span style="color:#e6db74">rimraf node_modules
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">&#39;&#39;&#39;</span>

<span style="color:#75715e"># 安装项目需要的所有依赖</span>
npm install

<span style="color:#75715e"># 卸载安装的包</span>
npm uninstall <span style="color:#960050;background-color:#1e0010">包名</span>

<span style="color:#75715e"># 查看包的详细信息</span>
npm info <span style="color:#960050;background-color:#1e0010">包名</span>

<span style="color:#75715e"># 更新包</span>
npm audit fix
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 创建vue项目</span>
vue init webpack <span style="color:#960050;background-color:#1e0010">项目名</span>

<span style="color:#75715e"># 进入vue项目</span>
cd <span style="color:#960050;background-color:#1e0010">项目名</span>
<span style="color:#e6db74">&#39;&#39;&#39;
</span><span style="color:#e6db74">build	--vue部署的时候打包用的
</span><span style="color:#e6db74">config	--配置
</span><span style="color:#e6db74">	dev.env.js	--开发环境
</span><span style="color:#e6db74">	index.js	--项目主要配置
</span><span style="color:#e6db74">	prod.env.js	--生产环境
</span><span style="color:#e6db74">dist	--和hugo一样，打包好的都放在这个文件夹里 | 打包文件
</span><span style="color:#e6db74">node_modules	--安装的依赖的总文件夹，不能提交到线上版本库
</span><span style="color:#e6db74">src		--项目核心文件(需要掌握的部分)
</span><span style="color:#e6db74">	assets		--静态资源(样式类文件，如css)
</span><span style="color:#e6db74">	components	--公共组件
</span><span style="color:#e6db74">	router		--路由
</span><span style="color:#e6db74">	App.vue		--根组件
</span><span style="color:#e6db74">	main.js		--入口文件
</span><span style="color:#e6db74">static		--静态资源(一般放二进制资源)
</span><span style="color:#e6db74">.babelrc	--编译参数
</span><span style="color:#e6db74">.editorconfig	--代码格式
</span><span style="color:#e6db74">.gitignore	--git上传需要忽略的文件配置
</span><span style="color:#e6db74">.postcssrc.js	--转换css的工具
</span><span style="color:#e6db74">index.html	--主页
</span><span style="color:#e6db74">package.json	--项目基本信息
</span><span style="color:#e6db74">README.md	--项目说明
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">&#39;&#39;&#39;</span>
<span style="color:#75715e"># 运行vue项目</span>
npm run dev

</code></pre></div>
</div>


    </main>

    
  </body>
</html>
